import React, { useEffect } from "react"
import { View /**, Image  */ } from "@tarojs/components"
import Taro, { useReachBottom } from "@tarojs/taro"
import GpContainer from "@/components/GpContainer"
import styles from "./index.module.scss"
import { useNavigationOpacity, useSetState } from "@/utils/hooks"
import ImageCascade from "../components/imageCascade"
import { getTopicSquareList } from "@/apis/yikao-community"
import { requestIsFullfilled } from "@/utils/request"
import { navigation } from "@/utils/router"
import { pageMapperCommunity } from "@/constants/pageMap"
import GpNavbar from "@/components/GpNavbar"
import clsx from "clsx"

type IState = {
  list: IApiRelative.IGetTopicSquareList.IGetTopicSquareListItem[]
  hasMore: boolean
  current: number
}
/**
 * @page 话题广场
 */
export default function Wordsquare() {
  const [opacity] = useNavigationOpacity()
  const [state, setState, stateRef] = useSetState<IState>(
    {
      list: [],
      current: 1,
      hasMore: true
    },
    true
  )
  useEffect(() => {
    handleSearch()
  }, [])
  useReachBottom(() => {
    if (stateRef.current?.hasMore) {
      setState({ current: stateRef.current.current + 1 })
      handleSearch()
    }
  })
  function handleSearch() {
    Taro.showLoading()
    getTopicSquareList({
      pagination: {
        current: stateRef.current?.current as number,
        pageSize: 10
      },
      search: {},
      sort: {
        predicate: "",
        reverse: false
      }
    })
      .then(res => {
        if (requestIsFullfilled(res)) {
          const { list, pagination } = res.data.data
          setState({
            list: pagination.current === 1 ? list : stateRef.current?.list.concat(list),
            hasMore: pagination.current < pagination.pageCount
          })
        }
      })
      .finally(() => Taro.hideLoading())
  }
  function renderNavigation() {
    return (
      <GpNavbar
        arrowLeftProps={{
          color: "#333333"
        }}
        navigationBarTitleText="话题广场"
        navigationBarBackgroundColor={`rgba(255, 255, 255, ${opacity})`}
        backgroundColorTop="transparent"
      />
    )
  }
  function renderList() {
    return (
      <View className="flex flex-col gap-16px box-border pt-48px relative">
        {/* list item for loop */}
        {state.list.map((l, index) => (
          <View
            key={l.id}
            className={styles.listItem}
            onClick={() => navigation(pageMapperCommunity.WordDetail, { id: l.id })}
          >
            <View
              className={styles.imageWrap}
              style={{
                backgroundImage: `url(${l.thumbnail})`
              }}
            >
              {/* <Image src={l.thumbnail} className={styles.image} mode="center" /> */}
              <View className={styles.mark}>{index + 1}</View>
            </View>
            <View className="flex-1 w-0">
              <View className="text-30px text-bold font-500 truncate"># {l.title}</View>
              <View className="text-24px text-light font-400 truncate mt-16px">
                {l.description}
              </View>
              <View className="flex flex-row gap-8px items-center box-border mt-24px">
                <ImageCascade images={l.miniVisitorHeads} />
                <View className="text-gray text-24px font-400">{l.viewCount}人浏览</View>
              </View>
            </View>
          </View>
        ))}
      </View>
    )
  }
  return (
    <GpContainer>
      <View className={clsx("bgBox bgBox2", styles.wordsquare)}>
        {renderNavigation()}
        {renderList()}
      </View>
    </GpContainer>
  )
}
